import React from 'react';
import { Button, WhiteSpace, WingBlank, InputItem } from 'antd-mobile';
import { connect } from 'dva';
import _ from 'lodash';
import moment from 'moment';
import { routerRedux } from 'dva/router';
import Container from '../components/Base/Container';
import { Helmet } from "react-helmet";
import { ChatList } from 'react-chat-elements';
import 'react-chat-elements/dist/main.css';
import styles from './IMChatList.less';

class IMChatList extends React.Component {

  componentDidMount() {
    window.scrollTo(0, 0);
  }

  onItemClick = (item) => {
    if (item && item.card_no) {
      this.props.toChatMessage(item);
    }
  }

  render() {
    let { chatList = [] } = this.props.im;
    chatList = _.orderBy(chatList, ['sendTime'], ['desc']);
    const data = _.map(chatList, (item) => {
      return {
        card_no: item.sender.card_no,
        avatar: item.avatar,
        title: item.sender.username,
        subtitle: item.message ? item.message.content : '',
        date: item.sendTime ? moment(item.sendTime).toDate() : '',
        unread: 0,
      };
    });
    let chatListItem = (<ChatList
      className={styles.chatList}
      dataSource={data}
      onClick={this.onItemClick}
    />);
    if (!data || !data.length) {
      chatListItem = <div style={{ color: '#888', paddingTop: '0.5rem', textAlign: 'center' }}>暂无消息</div>;
    }

    return (
      <Container title="消息列表" className={styles.imChatList}>
        {/* <Helmet> */}
          {/* <style>{'html, body, #root { height: 100%; overflow: hidden; }'}</style> */}
        {/* </Helmet> */}
        {chatListItem}
      </Container>
    );
  }
}

export default connect((state) => {
  return {
    im: state.im,
  };
}, (dispatch, props) => {
  return {
    toChatMessage: (item) => {
      dispatch({
        type: 'im/toChatMessage',
        payload: item,
      });
    },
  };
})(IMChatList);
